<template>
	<page-body>
    <view class="page">
		<view class="flex flex-direction align-stretch benben-position-layout flex ctshopList_flex_0" :style="{height:(271+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
		   <view class='flex align-center justify-between ctshopList_fd0_0'>
		       <view class='flex flex-wrap align-center ctshopList_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
		           <text class='fu-iconfont2  ctshopList_fd0_0_c0_c0'>&#xe794;</text>
		       </view>
		       <text class='ctshopList_fd0_0_c1'>大学选择</text>
		       <view class='flex flex-wrap align-center ctshopList_fd0_0_c0'>
		       </view>
		   </view>
		    <view class='flex flex-wrap align-center ctshopList_fd0_1'>
		        <view class='flex flex-wrap align-center ctshopList_fd0_1_c0'>
		            <image class='ctshopList_fd0_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"14.png"'></image>
		            <benben-input class='flex-sub ctshopList_fd0_1_c0_c1' type="text" :placeholder="`搜索商圈`" confirm-type="done" :maxlength="-1" 
					:adjust-position='true' placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx"  v-model="searchKeyword" />
		        </view>
		    </view>
		    <view class='flex align-center self-center justify-between ctshopList_fd0_2'>
		            <text class='ctshopList_fd0_2_c0'>当前定位</text>
		    </view>
		    <view class='flex flex-wrap align-center justify-between ctshopList_fd0_3'>
		
		        <view class='flex flex-wrap align-center ctshopList_fd0_3_c0' >
					<image class='ctshopList_fd0_3_c0_c1' mode="aspectFit" :src='STATIC_URL+"124.png"'></image>
		            <text class='ctshopList_fd0_3_c0_c2'>地址11111112{{ currentLocation }}</text>
		        </view>
		
		        <view class='flex flex-wrap align-center' @tap.stop="re定位()">
		            <text class='ctshopList_fd0_3_c1_c0'>重新定位</text>
		        </view>
		    </view>
		
		</view>
		<view :style="{height: (271+StatusBarRpx)+'rpx'}"></view>
		<!---flex布局flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout ctshopList_flex_1">
		    <template v-for="(school, index) in filteredSchools" >
		        <view class='flex flex-wrap align-start ctshopList_fd1_0' :key="index">
		        
		            <view class='flex align-center self-center justify-between flex-sub'>
						<view class="flex flex-wrap align-center" style="position: relative;">
							<text class='ctshopList_fd1_0_c1_c0'>{{ school.name }}</text>
							<text class='ctshopList_fd1_0_c1_c1'>{{ school.address }}</text>
							<text class="flex ctshopList_fd1_0_c1_cx" v-if="school.status == 1">营业中11</text>
						</view>
		                
		                <view class='flex flex-wrap align-center ctshopList_fd1_1'>
		                    <text class='ctshopList_fd1_1_c1'>距你</text>
		                    <text class='ctshopList_fd1_1_c2'>{{ school.distance.toFixed(1) }}km</text>
							<button type="text" size="mini" @click="navigateToSchool(school)">导航</button>
		                </view>
		            </view>
		        </view>
		    </template>
		    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData" :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
		</view>
        
    </view>
	</page-body>
</template>

<script>
import pagingList from '@/common/mixin/paging_list.js';
import {
		validate
	} from '@/common/utils/validate.js'

export default {
	mixins: [pagingList],
    data() {
        return {
            currentLocation: '',
            schools: [
                {
                    name: '武汉纺织大学东湖校区',
                    address: '梨园渔光村1号武汉纺织大学东湖校区',
                    status: '1',
                    latitude: 30.55, // 模拟纬度
                    longitude: 114.35 // 模拟经度
                },
                {
                    name: '武汉添瑞景',
                    address: '中南路街街道中南路街宝通寺38号百瑞景生活区瑞景广场联华超市二楼味知香(瑞景广场店)',
                    status: '1',
                    latitude: 30.54,
                    longitude: 114.34
                },
				{
				    name: '清华大学',
				    address: '清华大学38清华大学(清华大学)',
				    status: '1',
				    latitude: 30.55,
				    longitude: 114.30
				},
				{
				    name: '北京大学',
				    address: '北京大学38北京大学(北京大学)',
				    status: '营业中',
				    latitude: 30.56,
				    longitude: 114.36
				},
				{
				    name: '人民大学',
				    address: '人民大学38人民大学(人民大学)',
				    status: '营业中',
				    latitude: 30.51,
				    longitude: 114.37
				},
                // 更多学校数据...
            ],
            searchKeyword: '',
            userLatitude: 0,
            userLongitude: 0
        };
    },
    computed: {
        filteredSchools() {
            if (!this.searchKeyword) {
                return this.schools.map(school => ({
                   ...school,
                    distance: this.getDistance(school.latitude, school.longitude)
                }));
            }
            return this.schools.filter(school => school.name.includes(this.searchKeyword)).map(school => ({
               ...school,
                distance: this.getDistance(school.latitude, school.longitude)
            }));
        }
    },
    onLoad() {
        this.getLocation();
    },
    methods: {
        getLocation() {
            uni.getLocation({
                type: 'wgs84',
                success: res => {
                    this.userLatitude = res.latitude;
                    this.userLongitude = res.longitude;
                    this.currentLocation = res.address || '定位中...';
                },
                fail: err => {
                    console.log('获取定位失败', err);
                }
            });
        },
        re定位() {
            this.getLocation();
        },
        getDistance(lat2, lng2) {
            const radLat1 = this.userLatitude * Math.PI / 180.0;
            const radLat2 = lat2 * Math.PI / 180.0;
            const a = radLat1 - radLat2;
            const b = this.userLongitude * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
            let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
                Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
            s = s * 6378.137; // 地球半径，单位为千米
            return s;
        },
        navigateToSchool(school) {
            uni.openLocation({
                latitude: school.latitude,
                longitude: school.longitude,
                name: school.name,
                address: school.address
            });
        }
    }
};
</script>

<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: rgba(246, 246, 246, 1);
        background-size: 100% auto;
    }

    .ctshopList_flex_0 {
        border-bottom: 1px solid #eee;
        background: var(--benbenbgColor1);
        width: 750rpx;
        height: 271rpx;
        overflow: hidden;
        z-index: 10;
        top: 0rpx;
        background-size: 100% auto !important;
    }

    .ctshopList_fd0_3_c1_c1 {
        width: 22rpx;
        height: 12rpx;
        margin: 0rpx 0rpx 0rpx 8rpx;
    }

    .ctshopList_fd0_3_c1_c0 {
        color: #1178F0;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 40rpx;
    }

    .ctshopList_fd0_3_c0_c0_c0 {
        color: #333333;
        font-size: 28rpx;
        font-weight: 600;
        line-height: 40rpx;
    }

    .ctshopList_fd0_3_c0_c2 {
        color: #333333;
        font-size: 28rpx;
        font-weight: 600;
        line-height: 40rpx;
    }
	.ctshopList_fd0_3_c0_c0_c0x {
	    color: #fff;
	    font-size: 24rpx;
	    font-weight: 500;
	    line-height: 33rpx;
	}
	
	.ctshopList_fd0_3_c0_c0x {
	    border: 1px solid #FF8E21;
	    background: #FF8E21;
	    padding: 0rpx 17rpx 0rpx 17rpx;
	    height: 56rpx;
	    border-radius: 8rpx;
	    background-size: 100% auto;
	    margin: 0rpx 16rpx 0rpx 0rpx;
	}

    .ctshopList_fd0_3_c0 {
        touch-action: none;
        width: 590rpx;
    }

    .ctshopList_fd0_3 {
        padding: 0rpx 24rpx 24rpx 24rpx;
        margin: 0rpx 0rpx 0rpx 0rpx;
    }

    .ctshopList_fd0_2_c2_c0_1 {
        color: var(--benbenFontColor4);
        font-size: 32rpx;
        font-weight: 400;
        line-height: 45rpx;
        margin: 0rpx 10rpx 0rpx 0rpx;
    }

    .ctshopList_fd0_2_c1_c1 {
        width: 10rpx;
        height: 18rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .ctshopList_fd0_2_c1_c0_1 {
        font-size: 32rpx;
        font-weight: 400;
        line-height: 45rpx;
        margin: 0rpx 10rpx 0rpx 0rpx;
        color: var(--benbenFontColor4);
    }

    .ctshopList_fd0_2_c1_c0 {
        color: #333333;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 45rpx;
        margin: 0rpx 10rpx 0rpx 0rpx;
        text-align: center;
        font-style: normal;
    }

    .ctshopList_fd0_2_c0_c1 {
        width: 16rpx;
        height: 9rpx;
        margin: 0rpx 0rpx 0rpx 12rpx;
    }

    .ctshopList_fd0_2_c0_c0_1 {
        font-size: 32rpx;
        font-weight: 400;
        line-height: 45rpx;
        color: var(--benbenFontColor4);
    }

    .ctshopList_fd0_2_c0_c0 {
        color: var(--benbenFontColor2);
        font-size: 28rpx;
        font-weight: 400;
        line-height: 32rpx;
        text-align: center;
        font-style: normal;
    }

    .ctshopList_fd0_2_c0 {
		color: var(--benbenFontColor2);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 32rpx;
		text-align: center;
		font-style: normal;
        margin: 0rpx 0rpx 0rpx 0rpx;
    }

    .ctshopList_fd0_2 {
        padding: 0rpx 32rpx 0rpx 32rpx;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 36rpx;
        margin: 10rpx 0rpx 16rpx 0rpx;
    }

    .ctshopList_fd0_1_c0_c1 {
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
    }

    .ctshopList_fd0_1_c0_c0 {
        width: 30rpx;
        height: 32rpx;
        margin: 0rpx 22rpx 0rpx 0rpx;
    }

    .ctshopList_fd0_1_c0 {
        background: #F6F7F9;
        border-radius: 36rpx 36rpx 36rpx 36rpx;
        width: 702rpx;
        height: 72rpx;
        padding: 0rpx 16rpx 0rpx 32rpx;
    }

    .ctshopList_fd0_1 {
        padding: 0rpx 32rpx 0rpx 32rpx;
        // margin: 16rpx 0rpx 16rpx 0rpx;
    }

    .ctshopList_fd0_0_c1 {
        font-size: 32rpx;
        font-weight: 700;
        color: #333333;
        line-height: 45rpx;
    }

    .ctshopList_fd0_0_c0_c0 {
        font-size: 36rpx;
        color: #333;
    }

    .ctshopList_fd0_0_c0 {
        width: 120rpx;
        height: 88rpx;
    }

    .ctshopList_fd0_0 {
        height: 88rpx;
        // padding: 20rpx 32rpx 20rpx 32rpx;
    }

    .ctshopList_flex_1 {
        padding: 24rpx 24rpx 0rpx 24rpx;
    }

    .ctshopList_fd1_0_c1_c2_c4 {
        width: 16rpx;
        height: 9rpx;
        margin: 10rpx 10rpx 0rpx auto;
    }

    .ctshopList_fd1_0_c1_c2_c0_c0 {
        color: #FF3707;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
    }

    .ctshopList_fd1_0_c1_c2_c0 {
        border: 1px solid var(--benbenbdColor2);
        padding: 0rpx 15rpx 0rpx 15rpx;
        border-radius: 8rpx;
        height: 32rpx;
        line-height: 32rpx;
        margin: 0rpx 6rpx 16rpx 6rpx;
    }

    .ctshopList_fd1_0_c1_c2 {
        margin: 32rpx 0rpx 0rpx 0rpx;
    }

    .ctshopList_fd1_0_c1_c1_c4 {
        color: #666666;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 33rpx;
        margin: 0rpx 0rpx 0rpx 20rpx;
    }

    .ctshopList_fd1_1_c2 {
        color: #666666;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 33rpx;
    }

    .ctshopList_fd1_1_c1 {
        color: #666666;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 33rpx;
        margin: 0rpx 0rpx 0rpx 16rpx;
    }

    .ctshopList_fd1_0_c1_c1_c1 {
        color: #FF5307;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 33rpx;
    }

    .ctshopList_fd1_0_c1_c1_c0 {
        width: 20rpx;
        height: 20rpx;
    }

    .ctshopList_fd1_0_c1_c1 {
        margin: 20rpx 0rpx 0rpx 8rpx;
    }

    .ctshopList_fd1_0_c1_c0 {
        color: #333333;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 45rpx;
		width: 80%;
        margin: 0rpx 0rpx 0rpx 8rpx;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
    }
	.ctshopList_fd1_0_c1_cx{
		// position: absolute;
		right: 24rpx;
		top: 0;
		font-size: 24rpx;
		color: #999;
		margin-top: 24rpx;;
	}

    .ctshopList_fd1_0_c0 {
        width: 180rpx;
        height: 180rpx;
        border-radius: 16rpx;
        margin: 0rpx 16rpx 0rpx 0rpx;
    }

    .ctshopList_fd1_0 {
        background: var(--benbenbgColor1);
        background-size: 100% auto;
        border-radius: 16rpx;
        padding: 20rpx 0rpx 32rpx 24rpx;
        margin: 0rpx 0rpx 24rpx 0rpx;
    }

    .ctshopList_flex_2 {
        background: #fff;
        background-size: 100% auto;
        padding: 40rpx 0rpx 32rpx 0rpx;
        border-radius: 16rpx;
        width: 750rpx;
    }

    .ctshopList_fd2_3_c1 {
        background: #FF8E21;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        width: 311rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        color: var(--benbenFontColor3);
        height: 80rpx;
    }

    .ctshopList_fd2_3_c0 {
        background: #F8F8F8;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        width: 311rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        color: var(--benbenFontColor0);
        height: 80rpx;
        margin: 0rpx 40rpx 0rpx 0rpx;
    }

    .ctshopList_fd2_3 {
        margin: 32rpx 0rpx 0rpx 0rpx;
    }

    .ctshopList_fd2_2_c1 {
		border: 1px solid rgba(248, 248, 248, 1);
        background: rgba(248, 248, 248, 1);
        margin: 0rpx 10rpx 24rpx 10rpx;
        padding: 0rpx 46rpx 0rpx 46rpx;
        background-size: 100% auto;
        height: 72rpx;
        border-radius: 36rpx;
    }

    .ctshopList_fd2_2_c0_c0 {
        font-size: 28rpx;
        font-weight: 400;
        color: var(--benbenFontColor4);
    }

    .ctshopList_fd2_2_c0 {
        border: 1px solid #FF8E21;
        background: rgba(255,142,33,0.1);
        margin: 0rpx 10rpx 24rpx 10rpx;
        padding: 0rpx 46rpx 0rpx 46rpx;
        background-size: 100% auto;
        border-radius: 36rpx;
        height: 72rpx;
    }

    ::v-deep .ctshopList_fd2_2 {
        padding: 0rpx 30rpx 0rpx 30rpx;
    }

    .ctshopList_fd2_1 {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 45rpx;
        margin: 0rpx 40rpx 24rpx 40rpx;
    }

    .ctshopList_fd2_0_c1_c0 {
        margin: 0rpx 16rpx 0rpx 24rpx;
    }

    .ctshopList_fd2_0_c1 {
        background: #F6F7F9;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        width: 480rpx;
        height: 64rpx;
        margin: 0rpx 0rpx 0rpx 24rpx;
    }

    .ctshopList_fd2_0 {
        margin: 40rpx 0rpx 28rpx 0rpx;
        height: 88rpx;
        padding: 0rpx 0rpx 0rpx 32rpx;
    }
	.ctshopList_fd0_3_c0_c1 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}
</style>